<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <link rel="stylesheet" type="text/css" media="all" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"/>
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript" src="js/map.js"></script>
        <script type="text/javascript" src="js/polygon.min.js"></script>
        <script type="text/javascript" src="js/transparentimage.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script>

        <style type="text/css">
            html{ height: 100% }
            *{padding:0px; margin:0px;}
            button {padding:5px; float:right;}
            .textInput {padding:4px;}
            body{ overflow:hidden; height: 100%; margin: 0px; padding: 0px; font-family: 'Trebuchet MS' 'Helvetica', verdana, arial, sans-serif;}
            a {color:#a00; text-decoration:none;}
            #top{margin-top:5px;width:100%; height:50px; z-index:999; position:absolute;}
            #menuBar ul {padding-top:15px;}
            #menu {float:right; display:block-inline; padding-right:20px; width:550px;}
            #logo{width:45px; float:left; padding:2px 0px 0px 8px;}
            .icons{height:17px; width:17px; padding:0px 0px 0px 0px;}
            #title {float:left;display:block-inline; margin-left:7px;}
            #menuBar ul li{list-style: none; display: inline; padding: 5px 5px 5px 5px;background:#000000; -moz-border-radius: 5px; border-radius: 5px;}
            li a{color:white; }
            #map_canvas{width:100%; height:100%; z-index:10; position:fixed;bottom:0;}
            .overlay{padding:10px;z-index:999; position:absolute; width:200px; height:200px; background-color:#eee; -moz-border-radius: 15px; border-radius: 15px; border:3px solid #999;}
            .overlayhead{padding:0 0 0 5px;}
            .overlayhead h2{margin: 0px; padding:0px; font-size:1.2em; float:left;}
            .overlayhead .collapse{color:#000000; float:right; font-weight:bold; font-size:0.6em; padding:5px;}
            .overlaycontent{padding:6px; margin: 10px 0 0 0;  margin-left:auto; margin-right:auto;}
            #reports{bottom: 20px; left:20px;}
            #overview{bottom: 20px; left:260px;}
            #tasks{bottom:20px; left:500px; display:none;}
            #contacts{bottom:20px; left:740px; display:none;}
            .dropDown{display:none; padding:0 10px 15px 10px; z-index:999; position:absolute; background-color:#000; color:#fff; -moz-border-radius: 10px; border-radius: 10px; border:2px solid #444;}
            #area{top:50px; right:300px; float:right;}
            #points{top:50px; right:383px; float:right;}
            #points img{width:25px; height:25px;}
        </style>
        <script type="text/javascript">
            var activeCategory = "all";
            var serverURL = "http://camel25.daimi.au.dk:11338/rhok.drk/Server";
            var mapDiv = "map_canvas";
            var map;
            var spriteHeight = 34;
            var spriteSRC = "images/sprites.png";
            var polygonEditor;
            var polygons = new Array();
            var dots = new Array();
            var editing = false;
            var currentLatLng;
            var test = "uninitiated";
            // Area colors
            var unrest = "red";
            var natural = "green";
            var patrol = "blue";
            var other = "yellow";
            var danger_zone = "red";
            var myOptions;

            function initialize() {
                loadMap();
                generateTestPolygons();
                getReportsByCategory();
            }

            function generateTestPolygons() {
                var array = new Array();
                array[0] = new google.maps.LatLng(18.532, -72.335);
                array[1] = new google.maps.LatLng(18.535, -72.337);
                array[2] = new google.maps.LatLng(18.540, -72.34);
                array[3] = new google.maps.LatLng(18.541, -72.337);
                array[4] = new google.maps.LatLng(18.538, -72.332);
                array[5] = new google.maps.LatLng(18.534, -72.330);
                addPolygon(array, "red");
                addMarker(new google.maps.LatLng(18.54, -72.345),"<div>Headquarters</div>");
                array = new Array();
                array[0] = new google.maps.LatLng(18.525, -72.367);
                array[1] = new google.maps.LatLng(18.528, -72.360);
                array[2] = new google.maps.LatLng(18.521, -72.357);
                array[3] = new google.maps.LatLng(18.523, -72.365);
                addPolygon(array, "yellow");
            }

            function loadMap() {
                var myLatlng = new google.maps.LatLng(18.539269, -72.336408);
                myOptions = {
                    zoom: 13,
                    center: myLatlng,
                    mapTypeControl: true,
                    mapTypeControlOptions: {
                        style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
                        position: google.maps.ControlPosition.RIGHT_BOTTOM
                    },
                    disableDefaultUI: true,
                    mapTypeId: google.maps.MapTypeId.HYBRID
                }
                map = new google.maps.Map(document.getElementById(mapDiv), myOptions);
            }

            function getReportsByCategory(category) {
                $.getJSON(
                serverURL,
                'type='+category,
                function (data) {
                    for (var i = 0; i < data.length; i++) {
                        var html = "<div class='infoWindow'>" + time + "</div>";
                        var time = data[i].timestamp;
                        if (data[i].type == "flooding") {
                            test = "flooding";
                            loc1 = new google.maps.LatLng(data[i].coords[0].latitude, data[i].coords[0].longitude);
                            loc2 = new google.maps.LatLng(data[i].coords[1].latitude, data[i].coords[1].longitude);
                            var imageBounds = new google.maps.LatLngBounds(loc1,loc2);
                            var imageUrl = data[i].img;
                            new ProjectedOverlay(map, imageUrl, imageBounds, myOptions);
                        } else if (data[i].coords.length > 1) {
                            test = "area";
                            var array = new Array();
                            for (var j = 0; j < data[i].coords.length; j++) {
                                var type = data[i].type;
                                var latitude = data[i].coords[j].latitude;
                                var longitude = data[i].coords[j].longitude;
                                array[j] = new google.maps.LatLng(latitude, longitude);
                            }
                            addPolygon(array,type,html);
                        } else {
                            test = "point";
                            var latitude = data[i].coords[0].latitude;
                            var longitude = data[i].coords[0].longitude;
                            var loc = new google.maps.LatLng(latitude,longitude);
                            addMarker(loc, html);
                        }
                    };
                });
            }

            function startEdit() {
                editing = true;
                polygonEditor = new PolygonCreator(map);
                for ( var p = 0; p < polygons.length; p++) {
                    locs = polygons[p].getPath();
                    for (var l = 0; l < locs.getLength();l++) {
                        dots[dots.length] = new Dot(locs.getAt(l),map,polygonEditor.pen);
                    }
                }
            }

            function stopEdit() {
                editing = false;
                if (polygonEditor != null) {
                    var data = polygonEditor.show
                    polygonEditor.destroy();
                    for (var d = 0; d < dots.length; d++) {
                        dots[d].remove();
                    }
                }
            }

            // Adds a polygon along a specified path, with
            // a specified color.
            // If a html parameter is passed, an infowindow
            // is added displaying that information.
            function addPolygon(path,color,html) {
                var polygon = new google.maps.Polygon({
                    paths:path,
                    strokeColor:color,
                    strokeOpacity:0.8,
                    strokeWeight:2,
                    fillColor:color,
                    fillOpacity:0.35,
                    map:map
                });
                polygons[polygons.length] = polygon;
                if (html != null) {
                    var infowindow = new google.maps.InfoWindow({
                        content: html
                    });
                    google.maps.event.addListener(polygon, 'click', function(event) {
                        infowindow.setPosition(event.latLng);
                        infowindow.open(map);
                    });
                }
            }

            // Sets the color of the active polygon
            // currently being drawn by the editor tool.
            function setPolygonColor(color) {
                polygonEditor.pen.polygon.setColor(color);
            }

            function submitPolygon() {
                $.post(
                serverURL,
                $('#areaForm').serialize().replace(/%3C/g,'').replace(/%3E/g,'')+"&coordinates="+polygonEditor.showData()+"&type=security"
            )
                stopEdit();
                $('#area').hide();
                getReportsByCategory("all");
            }

            function submitPoint() {
                
                $.post(
                serverURL,
                $('#markerForm').serialize().replace(/%3C/g,'').replace(/%3E/g,'')+"&coordinates="+currentLatLng
            )
                $('#points').hide();
                getReportsByCategory("all");
            }

            // Adds a marker at a specified LatLng.
            // If a html parameter is passed, an infowindow
            // is added displaying that information.
            function addMarker(loc,html) {
                var marker = new google.maps.Marker({
                    position: loc,
                    map: map
                });
                if (html != null) {
                    var infowindow = new google.maps.InfoWindow({
                        content: html
                    });
                    google.maps.event.addListener(marker, 'click', function() {
                        infowindow.open(map,marker);
                    });
                }
            }

            function editMarker() {
                var listener = google.maps.event.addListener(map, 'click', function(event) {
                    currentLatLng = event.latLng;
                    var marker = new google.maps.Marker({
                        position: event.latLng,
                        map: map
                    });
                    listener.remove();
                });
            }

            $(document).ready(function() {
                $(".overlay").draggable({
                    grid: [ 20, 20 ]
                });
            });
        </script>

        <script>
            //Toggles boxes
            $(document).ready(function() {
                $(".overlay").draggable();
                $('.collapse').click(function(){
                    $(this).parent().parent().hide();
                });

                //Overlays
                $('#overviewToggle').click(function() {
                    $('#overview').toggle();
                    return false;
                });

                $('#reportsToggle').click(function() {
                    $('#reports').toggle();
                    return false;
                });

                $('#tasksToggle').click(function() {
                    $('#tasks').toggle();
                    return false;
                });

                $('#contactsToggle').click(function() {
                    $('#contacts').toggle();
                    return false;
                });
                  
                //Drop downs
                $('#pointToggle').click(function() {
                    $('#points').toggle();
                    editMarker();
                    stopEdit();
                    $('#area').hide();
                    return false;
                });

                $('#markToggle').click(function() {
                    $('#area').toggle();
                    if (!editing) startEdit();
                    else stopEdit();
                    $('#points').hide();
                    return false;
                });
            });
        </script>
    </head>
    <body onload="initialize()">
        <div id="top">
            <div id="menuBar">
                <img id="logo" src="images/redcross.png"/>
                <ul id="title">
                    <li><a href="#">Emergency Aid Response Logistics</a></li>
                </ul>
                <ul id="menu">
                    <li id="pointToggle"><a href="#"><img class="icons" src="images/pin.png" /> Mark point</a></li>
                    <li id="markToggle"><a href="#"><img class="icons" src="images/polygon.png" /> Mark area</a></li>
                    <li id="overviewToggle"><a href="#">Overview</a></li>
                    <li id="reportsToggle"><a href="#">Reports</a></li>
                    <li id="tasksToggle"><a href="#">Tasks</a></li>
                    <li id="contactsToggle"><a href="#">Contacts</a></li>
                </ul>
            </div>
        </div>
        <div id="map_canvas"></div>
        <div class="overlay" id="reports">
            <div class="overlayhead">
                <h2>Reports</h1>
                    <div class="collapse"><a href="#">X</a></div>
            </div><br />
            <div class="overlaycontent">
            </div>
        </div>
        <div class="overlay" id="overview">
            <div class="overlayhead">
                <h2>Overview</h1>

                    <div class="collapse"><a href="#">X</a></div>
            </div><br />
            <div class="overlaycontent">
            </div>
        </div>
        <div class="overlay" id="tasks">
            <div class="overlayhead">
                <h2>Tasks</h1>
                    <div class="collapse"><a href="#">X</a></div>
            </div><br />
            <div class="overlaycontent">
            </div>
        </div>
        <div class="overlay" id="contacts">
            <div class="overlayhead">
                <h2>Contacts</h1>
                    <div class="collapse"><a href="#">X</a></div>
            </div><br />
            <div class="overlaycontent">
            </div>
        </div>
        <div class="dropDown" id="area">
            <div class="overlaycontent">
                <form id="areaForm">
                    <input type="radio" name="securityType" value="blue" onClick="setPolygonColor('blue')" checked="yes"/> Patrol zone<br/>
                    <input type="radio" name="securityType" value="blue" onClick="setPolygonColor('black')"/> Other NGO<br/>
                    <input type="radio" name="securityType" value="green" onClick="setPolygonColor('green')"/> Natural hazard<br/>
                    <input type="radio" name="securityType" value="red" onClick="setPolygonColor('red')"/> Social unrest<br/><br/>
                    Report:<br/>
                    <input class="textInput" type="text" name="Comment"/><br/><br/>
                    <button onClick="submitPolygon()">Submit</button>
                </form>
            </div>
        </div>
        <div class="dropDown" id="points">
            <div class="overlaycontent">
                <input type="radio" name="type" value="blue" checked="yes"/> Shelter<br/>
                <input type="radio" name="type" value="green" /> Warehouse<br/>
                <input type="radio" name="type" value="yellow" /> HQ<br/><br/>
                Report:<br/>
                <input class="textInput" type="text" name="Comment"/><br/><br/>
                <button onClick="submitPoint()">Submit</button>
            </div>
        </div>

    </body>

</html>
